<script setup lang="ts">
import { Icon } from '@iconify/vue'

interface Props {
  hideTabBar: boolean
  color?: string
  activeColor?: string
  iconSize?: string | number
  safeAreaBottom?: number
}

const props = withDefaults(defineProps<Props>(), {
  hideTabBar: true,
  color: '#8C8C8C',
  activeColor: '#2B65FF',
  iconSize: 24,
  safeAreaBottom: 0,
})

// 主题色配置
const theme = {
  primary: props.activeColor,
  secondary: props.color,
  bgColor: '#FFFFFF',
  borderColor: '#F5F5F5',
}

// tabbar 配置保持不变...
const tabBarList = ref<CustomTabbarItem[]>([
  {
    iconType: 'svg',
    path: '/pages/home/index',
    text: '首页',
    name: 0,
    icon: 'home',
  },
  {
    iconType: 'svg',
    path: '/pages/demo/index',
    text: '工作台',
    name: 1,
    icon: 'menu',
  },
  {
    iconType: 'svg',
    path: '/pages/message/index',
    text: '消息',
    name: 2,
    icon: 'message',
    badge: 1,
  },
  {
    iconType: 'svg',
    path: '/pages/user/index',
    text: '我的',
    name: 3,
    icon: 'mine',
  },
])

const current = ref(0)

// 监听切换
watch(current, (newVal) => {
  const targetPath = tabBarList.value[newVal].path
  if (getCurrentPages().pop()?.route !== targetPath.slice(1)) {
    uni.switchTab({
      url: targetPath,
    })
  }
})

onShow(() => {
  const currentPage = getCurrentPages().pop()
  if (currentPage) {
    const index = tabBarList.value.findIndex(item => item.path.slice(1) === currentPage.route)
    if (index > -1) {
      current.value = index
    }
  }
})

function sizeToString(size: string | number) {
  return typeof size === 'number' ? `${size}` : size
}
</script>

<template>
  <view
    v-if="props.hideTabBar"
    class="tabbar-container"
    :style="{
      'paddingBottom': `${props.safeAreaBottom}px`,
      // 在 iOS 上使用 CSS 环境变量
      '--safe-area-bottom': `${props.safeAreaBottom}px`,
    }"
  >
    <sar-tabbar
      v-model:current="current"
      :color="theme.secondary"
      :active-color="theme.primary"
      :background="theme.bgColor"
      :border-color="theme.borderColor"
      class="custom-tabbar"
    >
      <sar-tabbar-item
        v-for="(item, index) in tabBarList"
        :key="index"
        :text="item.text"
        :name="item.name"
        :badge="item.badge"
        :dot="item.dot"
      >
        <template #icon="{ active }">
          <template v-if="item.iconType === 'sar'">
            <sar-icon
              :name="item.icon"
              :size="sizeToString(props.iconSize)"
              :color="active ? props.activeColor : props.color"
            />
          </template>

          <template v-else-if="item.iconType === 'uno'">
            <text
              :class="`i-${item.icon}`"
              :style="{
                color: active ? props.activeColor : props.color,
                fontSize: `${props.iconSize}px`,
              }"
            />
          </template>

          <template v-else-if="item.iconType === 'svg'">
            <gi-svg-icon
              :name="item.icon"
              :size="props.iconSize"
              :color="active ? props.activeColor : props.color"
            />
          </template>

          <template v-else-if="item.iconType === 'iconify'">
            <Icon
              :icon="item.icon"
              :color="current === item.name ? props.activeColor : props.color"
              :width="props.iconSize"
              :height="props.iconSize"
            />
          </template>
        </template>
      </sar-tabbar-item>
    </sar-tabbar>
  </view>
</template>

<style scoped lang="scss">
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;

  // 适配 iOS 安全区域
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .custom-tabbar {
    height: 50px;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
  }
}
</style>
